<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="js/mui.lazyload.js"></script>
	<script src="js/mui.lazyload.img.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/gongy.css"/>
    <link rel="stylesheet" type="text/css" href="css/listgy.css"/>
    <link rel="stylesheet" type="text/css" href="css/congz.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!-- 主界面移动、菜单不动 -->
	<div class="mui-off-canvas-wrap mui-draggable">
	  <!-- 菜单容器 -->
	  <aside class="mui-off-canvas-left" id="offCanvasSide">
	    <div class="mui-scroll-wrapper">
	      <div class="mui-scroll">
	        <!-- 菜单具体展示内容 -->
	     		<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="index.html">首页</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="congz.html">丛书展示</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="zixlist.html">咨讯中心</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="about.html">关于我们</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="lianxi.html">联系我们</a>
				    </li>
				</ul>
	      </div>
	    </div>
	  </aside>
	  <!-- 主页面容器 -->
	  <div class="mui-inner-wrap">
	    <!-- 主页面标题 -->
	    <header class="mui-bar mui-bar-nav biaotop congti">
	    	<a class="mui-btn iconfont congbtn01" href="javascript:history.go(-1)">&#xe608;返回</a>
	    	<a class="mui-btn iconfont congbtn02" href="">&#xe600;</a>
	    </header>
	    <span class="congtop">
	    	<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"  href="#offCanvasSide" ></a>
	    	 <h4>丛书展示</h4>
	    </span>
	    <nav class="mui-bar mui-bar-tab xialan">
		    <a class="mui-tab-item mui-active" href="index.html">
		        <span class="mui-icon iconfont">&#xe606;</span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon iconfont">&#xe605;</span>
		        <span class="mui-tab-label">QQ</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon iconfont">&#xe60a;</span>
		        <span class="mui-tab-label">公司介绍</span>
		    </a>
		    <a class="mui-tab-item" href="lianxi.html">
		        <span class="mui-icon iconfont">&#xe604;</span>
		        <span class="mui-tab-label">联系我们</span>
		    </a>
		</nav>
	    <div class="mui-content mui-scroll-wrapper bluebg" id="refreshContainer" >
	      <div class="mui-scroll cong_main">
	        <!-- 主界面具体展示内容 -->
	        	<div class="congban"></div>
	         	<div class="cong_list">
     				<div class="clist_top">
	         			<h3>《互联网方法论丛书》展示</h3>
		         		<h4>思想解放</h4>
		         		<h5>Ideoiogical</h5>
         			</div>
		                <!--列表一定要放到容器内,因为会有一个div append到mui-scroll中,需要在底部才能起作用-->
	                <ul class="mui-table-view" id="list">
	                    <li class="mui-table-view-cell mui-media">
	                        <a class="congl_tu" href="congxiang.html">
	                            <img class="mui-media-object mui-pull-left" src="images/shu01.jpg"/> 
	                        </a>
                            <div class="mui-media-body congwen">
                            	<a href="congxiang.html">
	                                <h5><a href="congxiang.html">《互联网时代的世界观》第一卷</a></h5>
	                                <h4><a href="congxiang.html">关于宇宙</a><a class="liuyan"><span class="iconfont">&#xe601;</span>255</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱件幸福的事情；可...<a class="gengd" href="#">【更多】</a></p>
                            	</a>
                            </div>
	                    </li>
	                    <li class="mui-table-view-cell mui-media">
	                        <a class="congl_tu" href="congxiang.html">
	                            <img class="mui-media-object mui-pull-left" src="images/shu01.jpg"/> 
	                        </a>
                            <div class="mui-media-body congwen">
                            	<a href="congxiang.html">
	                                <h5><a href="congxiang.html">《互联网时代的世界观》第一卷</a></h5>
	                                <h4><a href="congxiang.html">关于宇宙</a><a class="liuyan"><span class="iconfont">&#xe601;</span>255</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱件幸福的事情；可...<a class="gengd" href="#">【更多】</a></p>
                            	</a>
                            </div>
	                    </li>
	                    <li class="mui-table-view-cell mui-media">
	                        <a class="congl_tu" href="congxiang.html">
	                            <img class="mui-media-object mui-pull-left" src="images/shu01.jpg"/> 
	                        </a>
                            <div class="mui-media-body congwen">
                            	<a href="congxiang.html">
	                                <h5><a href="congxiang.html">《互联网时代的世界观》第一卷</a></h5>
	                                <h4><a href="congxiang.html">关于宇宙</a><a class="liuyan"><span class="iconfont">&#xe601;</span>255</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱件幸福的事情；可...<a class="gengd" href="#">【更多】</a></p>
                            	</a>
                            </div>
	                    </li>
	                    <li class="mui-table-view-cell mui-media">
	                        <a class="congl_tu" href="congxiang.html">
	                            <img class="mui-media-object mui-pull-left" src="images/shu01.jpg"/> 
	                        </a>
                            <div class="mui-media-body congwen">
                            	<a href="congxiang.html">
	                                <h5><a href="congxiang.html">《互联网时代的世界观》第一卷</a></h5>
	                                <h4><a href="congxiang.html">关于宇宙</a><a class="liuyan"><span class="iconfont">&#xe601;</span>255</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱件幸福的事情；可...<a class="gengd" href="#">【更多】</a></p>
                            	</a>
                            </div>
	                    </li>
	                 </ul>
				</div>
		  </div>
	    </div> 
	    <div class="mui-off-canvas-backdrop"></div>
	  </div> 
	</div>
	<script type="text/javascript">
		mui('body').on('tap','a',function(){document.location.href=this.href;});
		mui.init({
		    pullRefresh : {
		        container:"#refreshContainer",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
		        up : {
		            height:50,// 可选.默认50.触发上拉加载拖动距离
		            auto:false,// 可选,默认false.自动上拉加载一次
		            contentrefresh : "Please later",// 可选，正在加载状态时，上拉加载控件上显示的标题内容
		            contentnomore:'没有更多数据了',// 可选，请求完毕若没有更多数据时显示的提醒内容；
		            callback : function() {
		            	pullupRefresh();
//		                var self = this; // 这里的this == mui('#refreshContainer').pullRefresh()
//		                // 加载更多的内容
//		                loadMore(this);
		            } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		        }
		    }
		});
		
		var count = 0;
		var constr={
			listimg:"images/shu01",
			bookname:"《互联网时代的世界观》第一卷",
			booktype:"关于宇宙",
			zanmath:155,
			jianyao:"能和心爱的人一起睡觉，是件幸福的事情；和心爱的人的事情；可是"
		}
		//上拉加载内容获取
		function pullupRefresh() {
				setTimeout(function() {
					mui('#refreshContainer').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('#refreshContainer .mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 5; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell  mui-media';
						li.innerHTML +='<a class="congl_tu" href="congxiang.html"><img class="mui-media-object mui-pull-left" src='+constr.listimg+'.jpg/></a>';
						li.innerHTML +='<div class="mui-media-body congwen"><h5><a href="#">'+constr.bookname+'</a></h5><h4><a href="#">'+constr.booktype+'</a><a class="liuyan"><span class="iconfont">&#xe601;</span>'+constr.zanmath+'</a></h4><p class="mui-ellipsis"/>>>>'+constr.jianyao+'...<a class="gengd" href="#">【更多】</a></p></div>'
					    table.appendChild(li);
					}
				}, 1500);
			}
		
//		var createFragment = function(count) {
//			var fragment = document.createDocumentFragment();
//			var li;
//			for (var i = 0; i < count; i++) {
//				li = document.createElement('li');
//				li.className = 'mui-table-view-cell mui-media';
//				li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="' + constr.listimg + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
//				fragment.appendChild(li);
//			}
//			return fragment;
//		};
//		(function($) {
//			var list = document.getElementById("list");
//			list.appendChild(createFragment(100));
//			$(document).imageLazyload({
//				placeholder: '../images/60x60.gif'
//			});
//		})(mui);
		
	</script>
</body>
</html>